import React, { Component } from 'react';
import {Popup} from 'antd-mobile'
import style from './footerAlert.scss'

class FooterAlert extends Component {
    constructor(props) {
        super(props);
        this.state = {
        	hkIndex: -1 , //香港勾选状态
        	amIndex: -1 , //澳门勾选状态
        };
    }

	  hidePopup() {
		  Popup.hide(); //隐藏
    }

		componentWillMount(){
			if(sessionStorage.getItem('hkIndex')){  //缓存状态
				let hkIndex = sessionStorage.getItem('hkIndex')
				this.setState({
					hkIndex: hkIndex
				})
			}
			if(sessionStorage.getItem('amIndex')){  //缓存状态
				let amIndex = sessionStorage.getItem('amIndex')
				this.setState({
					amIndex: amIndex
				})
			}
		}

    choice(Index,type){
			console.log(Index,type)
			if(type =='hk'){
				if(sessionStorage.getItem('hkIndex') == Index){
					this.setState({
						hkIndex: -1
					});
					sessionStorage.setItem('hkIndex',-1)
				}else {
					this.setState({
						hkIndex: Index
					});
					sessionStorage.setItem('hkIndex',Index)
				}
			}else {
				if(sessionStorage.getItem('amIndex') == Index){
					this.setState({
						amIndex: -1
					});
					sessionStorage.setItem('amIndex',-1)
				}else {
					this.setState({
						amIndex: Index
					});
					sessionStorage.setItem('amIndex',Index)
				}
			}
    }

    /**
     * 渲染对应的列表
     */
    showList() {
      return this.props.visa.map((e,i)=>{
        return (<li key={i} onClick={() =>{this.props.choose(e.check,e.name)}}>{e.name}</li>)
      });
    }

    render() {

        return (
            <div className={style.footerAlertBox}>
               <ul className={style.listType}>
                 {this.showList()}
               </ul>
                <div style={{height: '.38rem',background: '#f1f1f1'}}></div>
                <div className={style.btn} onClick={e=>this.hidePopup()}>取消</div>
            </div>
        )
    }
}

FooterAlert.defaultProps = {
  visa: [{index: 0,check:1,name:'男'},{index:1,check:2,name:'女'}],
}

export default FooterAlert